<template>
  <div class="index-container">
    <div class="main-header clearfix">
      <el-row>
       <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-button type="primary"  icon="el-icon-plus" class="sureBtn"  size="medium"  @click="handleAdd" > 新 增 老 人</el-button>
        </el-col>
        <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
          <div class="search fr">
            <div>
              <el-input  v-model="selectForm.name"   size="medium"  placeholder="老人姓名"></el-input>
            </div>
            <div>
              <el-select v-model="selectForm.team_id" clearable placeholder="负责站点" filterable size="medium"  style="width: 100%;">
                <el-option
                  v-for="item in teamList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
            <el-button size="medium"   type="primary"   icon="el-icon-search"  class="fr"    @click="handleSearch" > 搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="main-content" style="height: calc(100vh - 250px);">
      <main-table
        :columns="tableColumns"
        :data="tableList"
        :loading="loading"
        :pagination="pagination"
        @getData="fetchTableList"
        wrapperHeight="calc(100% - 73px)" height="100%"
      >
       <el-table-column slot="img" label="图标图片" width="200" align="center">
         <template slot-scope="scope">
           <img class="task-icon-img" :src="scope.row.img" alt="">
         </template>
       </el-table-column>
       <el-table-column slot="status" label="状态">
         <template slot-scope="scope">
           <el-tag v-if="scope.row.status == '1'" type="success">正常</el-tag>
           <el-tag v-else type="danger">禁用</el-tag>
         </template>
       </el-table-column>
       <el-table-column slot="action" fixed="right" label="操作" width="300">
         <template slot-scope="scope">
           <el-button size="mini" type="success" @click="assign(scope.row)"> 分配服务任务</el-button>
           <el-button size="mini" type="success" @click="edit(scope.row)">编辑/查看</el-button>
           <el-button size="mini" type="danger" @click="cancelOrder(scope.row)">删除</el-button>
         </template>
       </el-table-column>

      </main-table>
    </div>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="1100px">
      <solder-add @cancle="dialogVisible = false" :typeList="typeList" :data="ruleForm" @handleMap="handleMap" @load="handleSearch"></solder-add>
    </el-dialog>

    <el-dialog
      title="分配服务任务"
      :visible.sync="dialogAssignVisible"
      :close-on-click-modal="false"
      width="1100px">
      <assign-service v-if="dialogAssignVisible" @cancle="dialogAssignVisible = false" :data="ruleForm"  @load="handleSearch"></assign-service>
    </el-dialog>



    <!-- 地图 -->
    <el-dialog
      title="选择地址"
      :visible.sync="mapVisible"
      width="60%"
      :before-close="closeMap"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <app-map
          :key="key2"
          ref="map"
          :keyword="keyword"
          @result="result"
        ></app-map>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { teamList } from "@/api/wangge";
  import mainTable from "@/components/main-table/index";
  import solderAdd from './components/solder-add'
  import assignService from './components/assign-service'
  import * as APISolder from '@/api/solder'
  import appMap from "@/components/AppMap/golde";
  import { sex, age, elderlyCategory, sourceType } from "@/utils"
  export default {
    name: "doorserve-wangge-solder",
    components: {
      mainTable,
      appMap,
      solderAdd,
      assignService
    },
    data() {
      return {
        loading: false,
        title: '添加图标',
        dialogVisible: false,
        ruleForm: {},
        currentSelectedData: [],
        pageData: {},
        selectForm: {
          page: 1
        },
        tableList:[],
        pagination: {
          current: 1,
          size: 10,
          total: 0
        },
        tableColumns: [
         {
           index: true,
           fixed: true
         },
         {
           prop: 'name',
           label: '名称',
           width: 100,
           fixed: true
         },
         {
           prop: 'sex',
           label: '性别',
           width: 80,
           formatter (row, column, cellValue) {
             return sex(cellValue)
           }
         },
         {
           prop: 'birthday',
           label: '年龄',
           width: 80,
           formatter (row, column, cellValue) {
             return age(cellValue)
           }
         },
         {
           prop: 'mobile',
           label: '联系方式',
           width: 150
         },
         {
           prop: 'vip',
           label: '会员等级',
           width: 150,
           formatter (row, column, cellValue) {
             if (cellValue === '0') {
               return '普通用户'
             } else {
               return 'vip用户'
             }
           }
         },
         {
           prop: 'id_card',
           label: '身份证号',
           width: 220
         },
         // {
         //   prop: 's_type',
         //   label: '老人类型',
         //   width: 130,
         //   formatter (row, column, cellValue) {
         //     return utils.stype(cellValue)
         //   }
         // },
         {
           prop: 'type',
           label: '老人类别',
           width: 100,
           formatter (row, column, cellValue) {
             return elderlyCategory(cellValue)
           }
         },
         {
           prop: 'source_type',
           label: '老人来源',
           width: 100,
           formatter (row, column, cellValue) {
             return sourceType(cellValue)
           }
         },
         {
           prop: 'special_tipe',
           label: '特殊群体',
           width: 200
         },
        /* {
           prop: 'health',
           label: '健康膳食',
           width: 200
         }, */
         {
           prop: 'team_name',
           label: '负责站点',
           width: 200
         },
         {
           prop: 'address',
           label: '老人住址',
           width: 400
         },
         {
           slot: 'action'
         }
        ],
        key: Math.random(),
        departTypeList: [],
        roleList: [],
        typeList:[],
        teamList:[],
        mapVisible: false,
        key2: Math.random(),
        keyword: "",
        base: {},
        dialogAssignVisible: false
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.fetchTableList();
      this.teamIndex();
    },
    methods: {
      handleMap(keyword) {
        this.key2 = Math.random();
        this.mapVisible = true;
        if (keyword) this.keyword = keyword;
      },
      closeMap() {
        this.mapVisible = false;
      },
      result(e) {
        this.mapVisible = false;
        this.$set(this.base, "lng", e.lng);
        this.$set(this.base, "lat", e.lat);
        // this.$set(this.base, "address", e.address);
        this.$set(this.ruleForm, "base", this.base);
      },
      teamIndex () {
        teamList({ page_size: 100 }).then(res => {
          this.teamList = res['data']['list'];
          this.teamList.forEach((item, index, arr) => {
            item['id'] = String(item['id'])
          })
        })
      },
      handleSearch() {
        this.pagination = {
          current: 1,
          size: 10,
          total: 0
        }
        this.fetchTableList({ page: 1 })
      },
      fetchTableList(pageObj) {
        this.loading = true;
        let data = {
          ...this.selectForm,
          ...pageObj
        }
        APISolder.solderIndex(data).then((resp) => {
          if (resp.code === 200) {
            const { list = [], total = 0 } = resp.data;
            this.tableList = list || []
            this.pagination.total = total;
          }
        }).finally(() => {
          this.loading = false;
        });
      },
      cancel(formName) {
        this.$refs[formName].resetFields();
        this[formName] = {};
        this.dialogVisible = false;
      },
      edit (row) {
        this.title = '编辑老人';
        this.key = Math.random();
        this.dialogVisible = true
        this.ruleForm = { ...row }
      },
      assign(row) {
        this.key = Math.random();
        this.dialogAssignVisible = true;
        this.ruleForm = { ...row }
      },
      handleAdd() {
        this.title = '新增老人';
        this.dialogVisible = true;
        this.key = Math.random();
        this.ruleForm = {
          name: '',
          cardid: '',
          age: '',
          sex: '',
          birthday: '',
          mobile: '',
          nation_id: '',
          religion_id: '',
          marry: '',
          type: '',
          live_type: '',
          work_status: '',
          edu_status: '',
          source_type: '1',
          province_id: '',
          city_id: '',
          area_id: '',
          town_id: '',
          xiaoqu: '',
          louhao: '',
          danyuan: '',
          menpai: '',
          team_id: '',
          s_type: '2',
          lng: '',
          lat: '',
          avatar: '',
          id_card_front: '',
          id_card_back: '',
          special: [],
          areaArr:[]
        };
      },
      handleCurrentChange(val) {
        this.selectForm.page = val;
        this.fetchTableList();
      },
      cancelOrder(row) {
        this.$confirm("确定删除该条数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            APISolder.solderDelete({ id: row.id }).then((resp) => {
              if (resp.code === 200) {
                this.$message({ type: "success", message: "删除成功!"});
                this.fetchTableList();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消操作",
            });
          });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 30px !important;
    margin: 0 !important;
    background: #fff !important;

    .main-header {
      padding-top: 4px;
      margin-bottom: 24px;

      .search {
        display: inline-block;

        .search-title {
          flex: 0 0 48px;
          width: 48px;
          font-size: 16px;
          line-height: 36px;
          color: #333;
        }
      }

      .search > div {
        display: inline-block;
        margin-left: 20px;
      }
    }
    .task-icon-img{
      width: 80px;
      height: 80px;
    }
  }

  .form-footer {
    padding-left: 100px;
  }

  .dialog-main {
    .table-do {
      margin-bottom: 15px;
    }

    ::v-deep {
      th {
        .cell {
          color: #fff;
        }
      }
    }
  }
</style>
